<template>
  <div class="withdrawal-records">
    <UserWithdraw />
    <Tabs v-model:active="params.status"
      @click-tab="handleConfirm">
      <Tab :title="category.text"
        :name="category.value"
        v-for="category in totalWithdrawStatus"
        :key="category.value" />
    </Tabs>
    <PullRefresh v-model="pageState.refreshing"
      @refresh="refresh" class="pull-refresh">
      <SkeletonCard
        v-if="stateWithdrawList.loading" />
      <Empty
        v-if="!stateWithdrawList.data.length && !stateWithdrawList.loading" />
      <List
        v-model:loading="stateWithdrawList.loading"
        :finished="pageState.finished"
        finished-text="没有更多了"
        error-text="请求失败，下拉刷新"
        :error="pageState.error"
        @load="fetchData">
        <WithdrawRecordCard
          v-for="(record, index) in stateWithdrawList.data"
          :key="record.withdrawalId"
          :index="index" :record="record"
          :length="stateWithdrawList.data.length" />
      </List>
    </PullRefresh>

  </div>
</template>
<script setup lang="ts">
import {
  Empty,
  List,
  PullRefresh,
  Tab,
  Tabs,
} from 'vant';

import SkeletonCard from '@/components/SkeletonCard.vue';

import UserWithdraw from '../components/UserWithdraw.vue';
import WithdrawRecordCard from '../components/WithdrawRecordCard.vue';
import { totalWithdrawStatus } from '../config';
import useWithdraw from '../hooks/useWithdraw';

const {
  state: stateWithdrawList,
  pageState,
  params,
  fetchData,
  refresh,
} = useWithdraw();

const handleConfirm = () => {
  pageState.value.refreshing = true;
  refresh();
};
</script>
<style lang="less" scoped>
.withdrawal-records {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  .pull-refresh {
    flex-grow: 1;
  }
}
</style>
